<template>
	<div class="box">
		<div class="item" v-for="(item,index) in result" :key="index">
			<img :src="item" alt="">
		</div>
	</div>
</template>

<script>
	import gameData from "../../data/gameData.json"
	
	export default {
		data() {
			return {
				list: [],
				result: []
			}
		},
		created() {
			this.getImgurl()
			// 1.完全随机
			// 确定循环的条件 list.length

			// while(this.list.length<18){
			// 	let rand = (Math.random()*100|0);
			// 	if(!this.list.includes(rand)){
			// 		this.list.push(rand);
			// 	}
			// }
			// (时间换空间,空间换时间)
			// 2.相对随机
			// 21.产生0-100数组
			// const tmp = []
			// for(let i=0;i<100;i++){
			// 	tmp.push(i)
			// }
			// // console.log(tmp)
			// // 22.任意切割18个成员
			// for(let i=0;i<18;i++){
			// 	let rand = (Math.random()*tmp.length)|0
			// 	this.result.push(tmp[rand])
			// }
			// console.log(this.result)
		},
		computed: {
			gender() {
				return this.$route.params.Gender
			}
		},
		methods: {
			getImgurl() {
				let sex = this.getSet()
				console.log(sex)
				const obj = gameData.avatarData[sex]
				// const tmp = []
				// 先生成一百个数字
				// for(let i=0;i<obj.length;i++){
				// 	tmp.push(i)
				// }
				// console.log(tmp)
				// 随机切割18个
				for (let i = 0; i < 18; i++) {
					let rand = (Math.random() * obj.length) | 0
					this.result.push(obj[rand])
				}
				// console.log(this.result)
			},
			getSet() {
				let gender = this.gender;
				console.log(gender)
				switch (gender) {
					case 1:
						return "femalePicUrl"
						// break;
					case "noface":
						return "other"
						// break;
					default:
						return "malePicUrl"
						// break;
				}
			}
		}

	}
</script>

<style lang="scss">
	@function px2vw($px) {
		@return $px * 100/750 * 1vw;
	}

	.box {
		position: absolute;
		left: 0;
		top: 0;
		width: 84.8vw;
		height: 84.8vw;
		// display: flex;
		// justify-content: center;
		// flex-wrap: wrap;
		padding-top: 20px;
		>.item {
			width: px2vw(120);
			height: px2vw(120);
			border-radius: 50%;
			>img {
				display: block;
				height: 100%;
				width: 100%;
				border-radius: 50%;
			}
		}
	}
	.item:nth-of-type(1){
		position: absolute;
		left: 50%;
		top: 15px;
		width: px2vw(60);
		height: px2vw(60);
		transform: translate(-50%,0);
		opacity: 0.5;
	}
	.item:nth-of-type(2){
		position: absolute;
		left: 50%;
		top: px2vw(116);
		width: px2vw(100);
		height: px2vw(100);
		transform: translate(-50%,0);
	}
	
	.item:nth-of-type(3){
		position: absolute;
		left: 50%;
		bottom: 9.5vw;
		width: px2vw(100);
		height: px2vw(100);
		transform: translate(-50%,0);
	}
	
	.item:nth-of-type(4){
		position: absolute;
		left: px2vw(152);
		top: px2vw(108);
		width: px2vw(80);
		height: px2vw(80);
	}
	
	.item:nth-of-type(5){
		position: absolute;
		right: px2vw(152);
		top: px2vw(108);
		width: px2vw(80);
		height: px2vw(80);
	}
	
	.item:nth-of-type(6){
		position: absolute;
		left: px2vw(120);
		top: px2vw(210);
		width: px2vw(100);
		height: px2vw(100);
	}
	
	.item:nth-of-type(7){
		position: absolute;
		right: px2vw(120);
		top: px2vw(210);
		width: px2vw(100);
		height: px2vw(100);
	}
	
	.item:nth-of-type(8){
		position: absolute;
		right: px2vw(120);
		top: px2vw(360);
		width: px2vw(100);
		height: px2vw(100);
	}
	
	.item:nth-of-type(9){
		position: absolute;
		left: px2vw(120);
		top: px2vw(360);
		width: px2vw(100);
		height: px2vw(100);
	}
	
	.item:nth-of-type(10){
		position: absolute;
		left: px2vw(152);
		bottom: 9vw;
		width: px2vw(80);
		height: px2vw(80);
	}
	
	.item:nth-of-type(11){
		position: absolute;
		right: px2vw(152);
		bottom: 9vw;
		width: px2vw(80);
		height: px2vw(80);
	}
	
	.item:nth-of-type(12){
		position: absolute;
		left: 50%;
		bottom: -10px;
		width: px2vw(60);
		height: px2vw(60);
		transform: translate(-50%,0);
		opacity: 0.5;
	}
	
	.item:nth-of-type(13){
		position: absolute;
		left: px2vw(40);
		top: px2vw(300);
		width: px2vw(80);
		height: px2vw(80);
	}
	
	.item:nth-of-type(14){
		position: absolute;
		right: px2vw(40);
		top: px2vw(300);
		width: px2vw(80);
		height: px2vw(80);
		// opacity: 0.8;
	}
	// 15-18四个角的第二小
	.item:nth-of-type(15){
		position: absolute;
		right: px2vw(60);
		top: px2vw(180);
		width: px2vw(60);
		height: px2vw(60);
		opacity: 0.8;
	}
	
	.item:nth-of-type(16){
		position: absolute;
		left: px2vw(60);
		top: px2vw(180);
		width: px2vw(60);
		height: px2vw(60);
		opacity: 0.8;
	}
	
	.item:nth-of-type(17){
		position: absolute;
		left: px2vw(60);
		bottom: px2vw(140);
		width: px2vw(60);
		height: px2vw(60);
		opacity: 0.8;
	}
	
	.item:nth-of-type(18){
		position: absolute;
		right: px2vw(60);
		bottom: px2vw(140);
		width: px2vw(60);
		height: px2vw(60);
		opacity: 0.8;
	}
</style>
